<template>
  <div class="gas-station">
    <div class="top-view">
      <div class="top-left">
        <box-view name="入站车辆类型">
          <vehicle-type :serviceData="gasStation.leftData"></vehicle-type>
        </box-view>
      </div>
      <div class="top-middle">
        <middle-view :dataVal="gasStation.topData"></middle-view>
      </div>
      <div class="top-right">
        <box-view name="收入来源">
          <div class="echarts-view">
            <echarts-view
              :option="setOption(gasStation.rightData)"
            ></echarts-view>
            <div class="echarts-view-text">
              <img class="bgh" src="../../../assets/img/ytfx/bgh.png"/>
              <span class="text-size">{{ subtext }}</span>
              <span>总收入</span>
            </div>
          </div>
          <div class="text-view-box">
            <div
              v-for="(item, index) in gasStation.rightData.list"
              :key="index"
              style="display: flex; width: 100%"
            >
              <span class="text-size-1">
                <span
                  class="box"
                  :style="{ background: optionRight.color[index] }"
                ></span>
              </span>
              <span class="text-size-2">{{ item.name }}</span>
              <span class="text-size-3">{{ item.money }}元</span>
              <span class="text-size-4">{{ item.rate }}%</span>
            </div>
          </div>
        </box-view>
      </div>
    </div>
    <div class="bottom-view">
      <div class="bottom-left">
        <box-view name="销售额趋势">
          <echarts-view
            :option="setLeftOption(gasStation.leftBottomData)"
          ></echarts-view>
        </box-view>
      </div>
      <div class="bottom-right">
        <box-view name="销售额统计">
          <table-view
            :titleList="titleList"
            :list="gasStation.rightBottomData"
          />
        </box-view>
      </div>
    </div>
  </div>
</template>

<script>
import TableView from "@/components/TableView/index.vue";
import EchartsView from "../components/echarts/index.vue";
import * as echarts from "echarts";
import BoxView from "@/components/BoxView/index.vue";
import MiddleView from "@/components/MiddleView/index.vue";
// import VehicleType from "../components/VehicleType/index.vue";
import VehicleType from "../components/VehicleType/indexSix";
export default {
  name: "GasStation",
  mixins: [],
  components: {
    TableView,
    EchartsView,
    BoxView,
    MiddleView,
    VehicleType,
  },
  props: ["gasStation"],
  data() {
    return {
      subtext: 0,
      optionLeft: {
        color: ["#05CFF7", "#177BEE", "#EAB966", "#6CD06A"],
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   // label: {
          //   //   backgroundColor: "#6a7985",
          //   // },
          // },
                axisPointer: {
                  type: "cross", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                  snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                },
                showContent: true, // 是否显示提示框浮层，默认显示
                alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
                padding: 15, // 提示框浮层内边距，单位px
                // position: "left",
                textStyle: {
                  color: "#fff", // 文字的颜色
                },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          lineStyle: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          icon: "roundRect",
        },
        yAxis: {
          name:'元',
          type: "value",
          lineStyle: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "油品",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(5,207,247,0.1)"
                },
                {
                  offset: 0,
                  color:"#05CFF7"
                },
              ]),
            },
            lineStyle: {
              color: "#05CFF7",
              width: 2,
            },
          },
          {
            name: "同期油品",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(23,123,238,0.1)",
                },
                {
                  offset: 0,
                  color:"#177BEE"
                },
              ]),
            },
            lineStyle: {
              color: "#177BEE",
              width: 2,
            },
          },
          {
            name: "非油品",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(234,185,102,0.1)",
                },
                {
                  offset: 0,
                  color:"#EAB966"
                },
              ]),
            },
            lineStyle: {
              color: "#EAB966",
              width: 2,
            },
          },
          {
            name: "非同期油品",
            data: [],
            type: "line",
            smooth: true,
            showSymbol: false,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.9,
                  color: "rgba(108,208,106,.01)",
                },
                {
                  offset: 0,
                  color:"#6CD06A"
                },
              ]),
            },
            lineStyle: {
              color: "#6CD06A",
              width: 2,
            },
          },
        ],
      },
      optionRight: {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        color: ["#05CFF7", "#177BEE", "#EAB966", "#6CD06A", "#CDDEE1"],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["75%", "90%"],
            labelLine: {
              length: 30,
            },
            padAngle: 2,
            label: {
              show: false,
              color: "#fff",
            },
            data: [],
            tooltip: {
                axisPointer: {
                  type: "none", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
                  snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
                },
                showContent: true, // 是否显示提示框浮层，默认显示
                alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
                confine: true, // 是否将 tooltip 框限制在图表的区域内
                backgroundColor: "rgba(0,0,0,0.5)", // 提示框浮层的背景颜色
                padding: 15, // 提示框浮层内边距，单位px
                // position: "left",
                textStyle: {
                  color: "#fff", // 文字的颜色
                },
            },
          },
        ],
      },

      // 中间标题列表
      titleList: [
        {
          class: "table-title-long text-size",
          title: "时间",
          value: "day",
        },
        {
          class: "table-title-long text-size",
          title: "汽油销售吨数（吨）",
          value: "nowGasNum",
        },
        // {
        //   class: "table-title-long text-size",
        //   title: "同期汽油销售吨数",
        //   value: "lastGasNum",
        // },
        {
          class: "table-title-long text-size",
          title: "汽油销售金额（元）",
          value: "nowGasMoney",
        },
        // {
        //   class: "table-title-long text-size",
        //   title: "同期汽油销售金额",
        //   value: "lastGasMoney",
        // },
        {
          class: "table-title-long text-size",
          title: "柴油销售吨数（吨）",
          value: "nowOilNum",
        },
        // {
        //   class: "table-title-long text-size",
        //   title: "同期柴油销售吨数",
        //   value: "lastOilNum",
        // },
        {
          class: "table-title-long text-size",
          title: "柴油销售金额（元）",
          value: "nowOilMoney",
        },
        // {
        //   class: "table-title-long text-size",
        //   title: "同期柴油销售金额",
        //   value: "lastOilMoney",
        // },
        {
          class: "table-title-long text-size",
          title: "非油品营业收入（元）",
          value: "nowOtherMoney",
        },
        // {
        //   class: "table-title-long text-size",
        //   title: "同期非油品营业收入",
        //   value: "lastOtherMoney",
        // },
      ],
      btnType: 0,
    };
  },
  computed: {
    // totalText1() {
    //   return (this.totalText = `总收入\n \n${this.total}`);
    // },
  },
  watch: {},
  created() {},
  mounted() {
    // this.init();
    // this.$set(
    //   this.optionRight.graphic[0].style,
    //   "text",
    //   `总收入\n \n${this.total}`
    // );
  },
  methods: {
    // 收入来源
    setOption(data) {
      if (data) {
        this.optionRight.series[0].data = data.list.map((item) => {
          return {
            value: item.money,
            name: item.name,
          };
        });
        this.optionRight.series[0].data[0]['selected'] = true
        this.subtext = data.allMoney;
      }
      return this.optionRight;
    },
    setLeftOption(data) {
      if (data) {
        // 时间轴
        this.optionLeft.xAxis.data = data.map((item) => item.day);
        // 油品
        this.optionLeft.series[0].data = data.map((item) => item.nowMoney);
        // 非油品
        this.optionLeft.series[2].data = data.map((item) => item.nowOtherMoney);
        // 同期油品
        this.optionLeft.series[1].data = data.map((item) => item.lastMoney);
        // 同期非油品
        this.optionLeft.series[3].data = data.map(
          (item) => item.lastOtherMoney
        );
      }
      return this.optionLeft;
      // this.optionLeft.xAxis.data =  data.map(item => item.day)
    },
    // // 销售趋势
    // getOptionLeft() {
    //   this.optionLeft.xAxis.data = ["一月", "二月", "三月", "四月"];
    //   this.optionLeft.series[0].data = [150, 230, 224, 218];
    //   this.optionLeft.series[1].data = [15, 23, 22, 21];
    // },
    // // 收入来源
    // getOptionRight() {
    //   this.optionRight.series[0].data = [
    //     { value: 1548, name: "汽油" },
    //     { value: 775, name: "柴油" },
    //     { value: 679, name: "非油品" },
    //   ];
    //   this.optionRight.series[1].data = [
    //     { value: 1048, name: "92#" },
    //     { value: 335, name: "95#" },
    //     { value: 310, name: "98#" },
    //     { value: 251, name: "0号柴油" },
    //     { value: 234, name: "纸巾" },
    //     { value: 147, name: "矿泉水" },
    //     { value: 135, name: "红牛" },
    //     { value: 102, name: "其他" },
    //   ];
    // },
    // init() {
    //   this.getOptionLeft();
    //   this.getOptionRight();
    // },
  },
};
</script>
<style lang="scss" scoped>
.gas-station {
  height: 100%;
  width: 100%;
  .top-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 10px;
    display: flex;
    .top-left {
      height: 100%;
      width: calc(30% - 20px);
      margin-left: 10px;
    }
    .top-middle {
      width: calc(40%);
      height: 100%;
      margin-left: 10px;
      margin-right: 10px;
    }
    .top-right {
      height: 100%;
      width: calc(30% - 20px);
      margin-right: 10px;
      position: relative;
      .echarts-view {
        position: relative;
        height: 80%;
            display: flex;
    justify-content: center;
    align-items: center;
        .bgh{
            position: absolute;
            z-index: 100;
            width: calc((((100vh - 215px) / 2) - 30px ) * 0.5);
            height: calc((((100vh - 215px) / 2) - 30px ) * 0.5);
            //top: -75%;
            top: 50%; /* 顶部距离父元素顶部50% */
  left: 50%; /* 左侧距离父元素左侧50% */
  transform: translate(-50%, -50%); /* 通过位移自身宽度和高度的50%，以确保居中 */
          }
        .echarts-view-text {
          position: absolute;
          z-index: 99;
          height:100%;
          width: 100%;
          //height: 150px;
          text-align: center;
          justify-content: center;
          //width: 150px;
          //top: 28px;
          //right: 195px;
          //background-image: url("../../../assets/img/ytfx/bgh.png");
          background-size: cover; /* 图片覆盖整个元素，保持图片的宽高比 */
          background-repeat: no-repeat; /* 不重复图片 */
          display: flex;
          flex-direction: column;
          span {
            text-align: center;
          }
          .text-size {
            color: #4dcdff;
            font-weight: Bold;
            font-size: 16px;
          }
        }
      }
      .text-view-box {
        height: 35%;
        width: calc(100% - 20px);
        position: absolute;
        bottom: -10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .text-size-1 {
          flex: 1;
          display: flex;
          justify-content: end;
          align-items: center;
          padding-right: 10px;
          .box {
            display: block;
            width: 10px;
            height: 10px;
          }
        }
        .text-size-2 {
          display: block;
          width: 80px;
        }
        .text-size-3 {
          display: block;
          flex: 2;
          text-align: right;
          color: #ffc100;
        }
        .text-size-4 {
          display: block;
          padding-left: 50px;
          flex: 1;
          color: #78fffd;
          text-align: left;
        }
        //background: #fff;
      }
    }
  }
  .bottom-view {
    width: 100%;
    height: calc(50% - 10px);
    margin-top: 10px;
    display: flex;
    .bottom-left {
      width: calc(50% - 15px);
      height: 100%;
      margin-right: 5px;
      margin-left: 10px;
    }
    .bottom-right {
      width: calc(50% - 15px);
      margin-right: 10px;
      height: 100%;
      margin-left: 5px;
    }
  }
}
</style>
<style lang="scss">
//.gas-station .bottom-view .table-view .table .text-size {
//font-size: 20px !important;
//}

.gas-station
  .bottom-view
  .bottom-right
  .table-view
  .table
  .table-title
  .text-size {
  font-size: 12px !important;
  color: #0e5cc6;
  background: linear-gradient(180deg, #fff, #0e5cc6);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
}
</style>